<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除表格行</title>
    <!--引入bootstrap css-->
    <link rel="stylesheet" type="text/css" href="../lib/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../lib/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../lib/easyui/themes/bootstrap/easyui.css">
    <!--引入外部的js库-->
    <script src="../lib/easyui/jquery.min.js"></script>
    <script src="../lib/easyui/jquery.easyui.min.js"></script>
    <script src="../lib/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<table class="table table-striped table-bordered">
    <thead>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>地址</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr id="tr_1">
        <td>张三</td>
        <td>20</td>
        <td>湖南</td>
        <td>
            <button id="btn_1" class="btn btn-primary">查看</button>
            <button id="bton_1" class=" btn btn-danger">删除</button>
        </td>
    </tr>
    <tr id="tr_2">
        <td>张三1</td>
        <td>21</td>
        <td>江西</td>
        <td>
            <button id="btn_2" class="btn btn-primary">查看</button>
            <button id="bton_2" class=" btn btn-danger">删除</button>
        </td>
    </tr>
    <tr id="tr_3">
        <td>张三2</td>
        <td>22</td>
        <td>山东</td>
        <td>
            <button id="btn_3" class="btn btn-primary">查看</button>
            <button id="bton_3" class="btn btn-danger">删除</button>
        </td>
    </tr>
    </tbody>
</table>
<script>
    $('button[id^="bton_"]').on('click',function(e){
    $(this).closest('tr').remove();
    })
</script>
</body>
</html>